<template>
  <div class="markdown">
    <h1>边框</h1>
    <a-row :gutter="20">
      <a-col :span="12">
        <MdPreview :val="demo1" :show="false" desName="边框一">
          <template slot="code">
            <Box1 style="height: 400px;">
              <template slot="center">
                边框内容
              </template>
            </Box1>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode1}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList1, 'box1.zip')">box1.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo3" :show="false" desName="边框三">
          <template slot="code">
            <Box3 style="height: 350px;">
              <template slot="center">
                边框内容
              </template>
            </Box3>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode3}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList3, 'box3.zip')">box3.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo6" :show="false" desName="边框六">
          <template slot="code">
            <Box6 style="height: 350px;">
              <template slot="center">
                边框内容
              </template>
            </Box6>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode6}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList6, 'box6.zip')">box6.zip</a></li>
              </ul>
          </template>
        </MdPreview>
      </a-col>
      <a-col :span="12">
        <MdPreview :val="demo2" :show="false" desName="边框二">
          <template slot="code">
            <div style="padding: 42px 24px 30px; height: 320px;">
              <Box2>
                <template slot="center">
                  边框内容
                </template>
              </Box2>
            </div>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode2}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList2, 'box2.zip')">box2.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo4" :show="false" desName="边框四">
          <template slot="code">
            <Box4></Box4>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode4}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList4, 'box4.zip')">box4.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo5" :show="false" desName="边框五">
          <template slot="code">
            <Box5 style="height: 300px;">
              <template slot="center">
                边框内容
              </template>
            </Box5>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode5}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList5, 'box5.zip')">box5.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo7" :show="false" desName="边框七">
          <template slot="code">
            <Box7 style="height: 350px;">
              <template slot="center">
                边框内容
              </template>
            </Box7>
          </template>
          <template slot="des">
              <p><span>父组件：</span></p>
              <pre v-highlight><code>{{boxCode7}}</code></pre>
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList7, 'box7.zip')">box7.zip</a></li>
              </ul>
          </template>
        </MdPreview>
      </a-col>
    </a-row>
    <h2>API</h2>
    <table>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      <tr>
        <td>title</td>
        <td>边框标题</td>
        <td>String</td>
        <td>''</td>
      </tr>
      <tr>
        <td>slot</td>
        <td>center内容区域</td>
        <td>'center'</td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
import { download } from '@/mixins/download.js';

import Box1 from "@/views/comps/components/box1.vue";
import Box2 from "@/views/comps/components/box2.vue";
import Box3 from "@/views/comps/components/box3.vue";
import Box4 from "@/views/comps/components/box4.vue";
import Box5 from "@/views/comps/components/box5.vue";
import Box6 from "@/views/comps/components/box6.vue";
import Box7 from "@/views/comps/components/box7.vue";
export default {
    mixins: [download],
    components: {
      Box1,
      Box2,
      Box3,
      Box4,
      Box5,
      Box6,
      Box7,
    },
    data() {
      return {
        demo1: `
<template>
    <div class="box1" style="width: 100%; height: 100%;">
      <i class="b_t"></i>
      <i class="b_t1"></i>
      <i class="b_l"></i>
      <i class="b_r"></i>
      <i class="b_b"></i>
      <i class="moves1d i_move_t3"></i>
      <i class="moves1b i_move_t1"></i>
      <p class="border_title"><span>{{title}}</span></p>
      <div class="k_main"><slot name="center"></slot></div>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '边框标题'
    }
  },
  data() {
    return {

    }
  }
}
<\/script>

<style lang="less" scoped>
.box1 { position: relative; width: 24%; padding: 30px 20px 20px; box-sizing: border-box;}
.box1 .b_t{display: block; width: calc(100% - 40px); position: absolute; top: 0px; left: 0; height: 30px; background: url(~@/assets/images/borderBox/box1/border-top.png) repeat-x left top;}
.box1 .b_t1{display: block; width: 40px; position: absolute; top: 0px; right: 0px; height: 30px; background: url(~@/assets/images/borderBox/box1/border-top1.png) repeat-x center top;}
.box1 .b_l{display: block; height: calc(100% - 30px); position: absolute; top: 30px; left: 0px; width: 20px; background: url(~@/assets/images/borderBox/box1/border-left.png) no-repeat center bottom;}
.box1 .b_r{display: block; height: calc(100% - 30px); position: absolute; top: 30px; right: 0px; width: 20px; background: url(~@/assets/images/borderBox/box1/border-right.png) no-repeat center bottom;}
.box1 .b_b{display: block; width: calc(100% - 40px); position: absolute; bottom: 0px; left: 20px; height: 20px; background: url(~@/assets/images/borderBox/box1/border-bottom.png) repeat-x center top;}
.box1 .b_b1{display: block; width: 20px; position: absolute; bottom: 0px; left: 0px; height: 20px; background: url(~@/assets/images/borderBox/box1/border-bottom1.png) no-repeat left top;}
.box1 .border_title { position: absolute; width: 100%; height: 53px; background: url(~@/assets/images/borderBox/box1/border_title.png) no-repeat left center; top: 0; left: 0; line-height: 50px; font-size: 20px; color: #00fffc; z-index: 99; box-sizing: border-box; padding-left: 10px;}
.box1 .border_title span { font-weight: 600; background-image:-webkit-linear-gradient(top,#fff,#61e7ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.box1 .k_main{background: rgba(0, 17, 56, 0.75); width: 100%; height: 100%; position: relative; padding-top: 30px; box-sizing: border-box;}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.moves1c { animation: 2s linear 0s normal infinite running moves1c;}
.moves1d { animation: 2s linear 0s normal infinite running moves1d;}
.i_move_t{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; top: -7px; display:block; position: absolute;}
.i_move_t1{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; top: -30px; right: -45px; transform: rotate(90deg); display:block; position: absolute;}
.i_move_t2{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; bottom: -6px; display:block; position: absolute;}
.i_move_t3{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; bottom: 30px; left: -43px; transform: rotate(90deg); display:block; position: absolute;}

@keyframes moves1a {
  0% {
    left: 0%;
    opacity: 0.6;
  }
  30% {
    left: 30%;
    opacity: 1;
  }
  60% {
    left: 60%;
    opacity: 0.6;
  }
  100% {
    left: calc(100% - 90px);
    opacity: 0;
  }
}
@keyframes moves1b {
  0% {
    top: 0%;
    opacity: 0.4;
  }
  30% {
    top: 30%;
    opacity: 1;
  }
  60% {
    top: 60%;
    opacity: 0.6;
  }
  100% {
    top: calc(100% - 30px);
    opacity: 0;
  }
}
@keyframes moves1c {
  0% {
    right: 0%;
    opacity: 0.6;
  }
  30% {
    right: 30%;
    opacity: 1;
  }
  60% {
    right: 60%;
    opacity: 0.6;
  }
  100% {
    right: calc(100% - 90px);
    opacity: 0;
  }
}
@keyframes moves1d {
  0% {
    bottom: calc(0% + 45px);
    opacity: 0.4;
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  60% {
    bottom: 60%;
    opacity: 0.6;
  }
  100% {
    bottom: calc(100% - 30px);
    opacity: 0;
  }
}
</style>
        `,
        demo2: `
 <template>
    <div class="box2" style="width:100%; height: 100%;">
      <i class="st_k1"></i>
      <i class="st_k2"></i>
      <i class="st_k3"></i>
      <i class="st_k4"></i>
      <i class="jiantou jiantou_a"></i>
      <i class="moves1a i_move_t"></i>
      <i class="moves1b i_move_t1"></i>
      <p class="st_tit">{{title}}<span class="time" style="left: 138px;">{{subTitle}}</span></p>
      <div class="st_main" style="width: 100%;"><slot name="center"></slot></div>
    </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      },
      subTitle: {
        type: String,
        default: '二级标题'
      }
    },
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.box2 { background: url(~@/assets/images/borderBox/box2/bg_item.png) repeat; min-height: 100px; min-width: 200px; display: inline-block; vertical-align: top; margin: 0px; position: relative;}
.box2 i { display: block; position: absolute;}
.box2 i.st_k1 { width: calc( 100% + 39px ); height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k1.png) no-repeat left top; left: -39px; top: -53px;}
.box2 i.st_k2 { width: 21px; height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k2.png) no-repeat center 30px; right: -21px; top: -53px;}
.box2 i.st_k3 { width: calc( 100% + 56px ); height: 29px; background: url(~@/assets/images/borderBox/box2/st_k3.png) no-repeat 18px center; left: -41px; bottom: -29px;}
.box2 i.st_k4 { width: 22px; height: 22px; background: url(~@/assets/images/borderBox/box2/st_k4.png) no-repeat left top; right: -20px; bottom: -21px;}
.box2.st_a i.st_k1 { width: calc( 100% + 39px ); height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k1_1.png) no-repeat left top; left: -39px; top: -53px;}
.box2.st_b i.st_k1 { width: calc( 100% + 39px ); height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k1_2.png) no-repeat left top; left: -39px; top: -53px;}
.box2 .st_main { width: 100%; position: relative; box-sizing: border-box; z-index: 10;}
.box2 .st_tit{color: #fff; font-size: 16px; position: absolute; top: -48px;}
.box2 .st_tit .time{color: #fff; font-size: 13px;background: url(~@/assets/images/borderBox/box2/bg_title_time.png) no-repeat left center; display: inline-block; position: absolute; left: 174px; padding-left: 28px; top: 4px; width: 180px; height:21px; line-height: 21px;}
.box2 .st_title { position: absolute; top: -84px; left: -35px; height: 46px; line-height: 46px; font-size: 28px; color: #f4f3ef;}
.box2 .st_title img { vertical-align: top;}
.box2 .st_title em { text-indent: 1em; display: block; height: 46px; line-height: 46px; font-style: normal;}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.i_move_t{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box2/sy_xl_bg-light.png) no-repeat center center; top: -30px;}
.i_move_t1{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box2/sy_xl_bg-light.png) no-repeat center center; top: -30px; right: -65px; transform: rotate(90deg);}

@keyframes moves1a {
  0% {
    left: 0%;
    opacity: 0.4;
  }
  30% {
    left: 30%;
    opacity: 1;
  }
  60% {
    left: 60%;
    opacity: 0.6;
  }
  100% {
    left: calc(100% - 90px);
    opacity: 0;
  }
}
@keyframes moves1b {
  0% {
    top: 0%;
    opacity: 0.4;
  }
  30% {
    top: 30%;
    opacity: 1;
  }
  60% {
    top: 60%;
    opacity: 0.6;
  }
  100% {
    top: calc(100% - 30px);
    opacity: 0;
  }
}
</style>
        `,
        demo3: `
<template>
  <div class="box3">
    <div class="vis_card_t"><span>{{title}}</span></div>
    <div class="vis_card_tl"></div>
    <div class="vis_card_tr"></div>
    <div class="vis_card_cl"></div>
    <div class="vis_card_cr"></div>
    <div class="vis_card_b"></div>
    <div class="vis_card_body"><slot name="center"></slot></div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.box3 {
  position: relative;
  box-sizing: border-box;
  padding: 44px 16px 1px 16px;
  z-index: 3;
}

.box3 .vis_card_t {
  display: block;
  position: absolute;
  width: calc(100% - 32px);
  height: 44px;
  top: 0;
  left: 16px;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_t2.png) no-repeat center;
  z-index: 4;
  text-align: center;
  line-height: 32px;
  user-select: none;
}

.box3 .vis_card_t span {
  font-size: 20px;
  font-weight: bold;
  background-image: -webkit-linear-gradient(top, #1bdcff, #adf8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box3 .vis_card_tl {
  display: block;
  position: absolute;
  width: 16px;
  height: 42px;
  top: 0;
  left: 0;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_tl.png) no-repeat center;
  z-index: 4;
}

.box3 .vis_card_tr {
  display: block;
  position: absolute;
  width: 16px;
  height: 42px;
  top: 0;
  right: 0;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_tr.png) no-repeat center;
  z-index: 4;
}

.box3 .vis_card_cl {
  display: block;
  height: calc(100% - 42px);
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 16px;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_cl.png) no-repeat center bottom;
  z-index: 4;
}

.box3 .vis_card_cr {
  display: block;
  height: calc(100% - 42px);
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 16px;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_cr.png) no-repeat center bottom;
  z-index: 4;
}

.box3 .vis_card_b {
  display: block;
  position: absolute;
  width: calc(100% - 32px);
  height: 1px;
  bottom: 0;
  left: 16px;
  background: #2886ab;
  z-index: 4;
}

.box3 .vis_card_body {
  width: 100%;
  height: 100%;
  background: rgba(11, 62, 94, .45);
  min-height: 50px;
  color: #fff;
  padding-bottom: 15px;
  padding-top: 10px;
}
</style>
        `,
        demo4: `
<template>
  <h1 class="box4">
    <span>边框标题</span>
  </h1>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.box4 {
  line-height: 40px;
  position: relative;
}

.box4 span {
  font-weight: bold;
  padding-right: 10px;
  background-image: -webkit-linear-gradient(top, #fff, #02ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 25px;
  font-style: italic;
  display: inline-block;
  position: relative;
  padding-left: 30px;
}

.box4 span::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/borderBox/box4/tit-small.png) no-repeat left bottom;
  left: 0px;
  top: 0px;
  z-index: 9;
}

.box4 span::after {
  content: '';
  display: block;
  position: absolute;
  width: 232px;
  height: 100%;
  background: url(~@/assets/images/borderBox/box4/tit-small-r.png) no-repeat left bottom;
  left: 100%;
  top: -3px;
  z-index: 9;
}

.box4::before {
  content: '';
  display: block;
  position: absolute;
  width: calc(100% - 300px);
  height: 1px;
  background: #0291b4;
  left: 300px;
  top: 11px;
}

.box4::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #0291b4;
  right: -8px;
  top: 4px;
  background: url(~@/assets/images/borderBox/box4/tit_d.png) no-repeat right center;
}

.box4.l::before {
  width: calc(100% - 400px);
  left: 400px;
}

.box4.l span::after {
  width: 90px;
}

.box4.ll::before {
  width: calc(100% - 500px);
  left: 500px;
}
</style>
        `,
        demo5: `
<template>
  <div class="box5">
    <i class="bor-top-l"></i>
    <i class="bor-btm-l"></i>
    <i class="bor-top-r"></i>
    <i class="bor-btm-r"></i>
    <div class="k-main">
      <h1>
        <span>{{title}}</span>
      </h1>
      <slot name="center"></slot>
    </div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.box5{position: relative; display: inline-block; overflow: hidden; padding: 19px 16px 16px 16px; width: 100%; height: 100%;}
.box5 .bor-top-l{background: url(~@/assets/images/borderBox/box5/border-top.png) no-repeat top left;width:calc(100% - 16px);height:19px ;position: absolute;top: 0px;left: 0px;}
.box5 .bor-btm-l{background: url(~@/assets/images/borderBox/box5/border-l.png) no-repeat bottom left; width:16px;height: calc(100% - 19px);position: absolute;bottom: 0px; left: 0px;}
.box5 .bor-top-r{background: url(~@/assets/images/borderBox/box5/border-right.png) no-repeat top right; width: 16px;height:calc(100% - 16px);position: absolute;top: 0px; right: 0px;}
.box5 .bor-btm-r{background: url(~@/assets/images/borderBox/box5/border-bottom.png) no-repeat bottom right;height:19px;width:calc(100% - 16px);position: absolute;bottom: -0px;right:0px ;}
.box5 .k-main{ background: rgba(0,34,110,0.8); top: 0px; position: relative; height: 100%; width: auto;}
.box5 .k-main>h1{height: 40px; line-height: 40px; position: relative; left: -17px; top: -15px; width: calc(100% + 22px);}
.box5 .k-main>h1 span{line-height: 45px; padding: 0px; padding-left: 15px; font-size: 16px; }
.box5 .k-main h1{height:45px ;width: 100%;background: url(~@/assets/images/borderBox/box5/title_bg.png) no-repeat bottom left;font-size:18px ;margin-left: 6px; margin-top: 0; margin-bottom: 0}
.box5:before{content: ''; height:10px ; width: 137px; position: absolute; display: block; top: 0px; left: -1px; background: url(~@/assets/images/borderBox/box5/guang_a1.png) no-repeat;animation: moves_w 2s linear infinite ;}
.box5:after{content: ''; width:10px ; height: 137px; position: absolute; display: block; top: 0px; left: -1px; background: url(~@/assets/images/borderBox/box5/guang_a2.png) no-repeat;animation: moves_h 2s linear infinite ;}
@keyframes moves_w{
  0%{left: -50px; opacity: 0;}
  10%{ opacity: 1;}
  40%{opacity: 1;}
  50%{left: calc(100% - 100px);opacity: 0;}
  100%{left: calc(100% - 100px);opacity: 0;}
}
@keyframes moves_h{
  0%{top: -50px; opacity: 0;}
  10%{ opacity: 0.8;}
  40%{opacity: 0.8;}
  50%{top: calc(100% - 100px);opacity: 0;}
  100%{top: calc(100% - 100px);opacity: 0;}
}
</style>
        `,
        demo6: `
<template>
  <div class="box6">
    <p class="item_tit">{{title}}</p>
    <i class="i_top_left"></i>
    <i class="i_bottom_right"></i>
    <div class="con"><slot name="center"></slot></div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.box6{width: 100%; box-sizing: border-box; box-shadow: 0px 0px 15px #2388a5 inset; position: relative; border: 1px solid #009e98; background: url(~@/assets/images/borderBox/box6/bg_btm.png) repeat;}
.box6 .item_tit{display: block;width: 464px; z-index: 3;  height: 99px; background: url(~@/assets/images/borderBox/box6/bg_tit5.png) no-repeat center center; position: absolute; top: -32px; left: 50%; margin-left: -232px; color:#00fff6; font-size: 21px; box-sizing: border-box; padding-top: 14px;padding-top: 14px\0;text-align: center;z-index: 0;}
.box6 .i_top_left{display: block; position: absolute; top: -2px; left: -2px; width: 15px; height: 15px; background: url(~@/assets/images/borderBox/box6/bor_top_left.png) no-repeat center center; z-index: 9;}
.box6 .i_bottom_right{display: block; position: absolute; bottom: -1px; right: -1px; width: 7px; height: 7px; background: url(~@/assets/images/borderBox/box6/bor_bottom_right.png) no-repeat center center;z-index: 9;}
.box6 .con{padding: 12px; padding-top: 35px; height: 100%;}
</style>
        `,
        demo7: `
<template>
  <div class="box7">
    <div class="k_top_con">
      <p>{{title}}</p>
    </div>
    <div class="k_main_con">
      <slot name="center"></slot>
    </div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.box7 { position: relative; width: 100%; height: 100%;}
.box7 .k_top_con { height: 54px; position: relative;}
.box7 .k_top_con::before { content: ''; position: absolute; left: 0; top: 0; background: url(~@/assets/images/borderBox/box7/k_top_bgl.png) no-repeat left top; height: 84px; width: calc(100% - 116px);}
.box7 .k_top_con::after { content: ''; position: absolute; right: 0; top: 0; background: url(~@/assets/images/borderBox/box7/k_top_bgr.png) no-repeat right top; height: 84px; width: 180px;}
.box7 .k_top_con p { position: relative; z-index: 9; font-size: 22px; color: #fff; line-height: 54px; padding: 0 40px;}
.box7 .k_top_con p img { vertical-align: middle; margin-top: -10px; margin-right: 15px;}
.box7 .k_main_con { height: 100px; border: 1px solid #4ce6e0; border-top: none; background-color: rgba(1, 24, 51, 0.85); padding: 12px; box-sizing: border-box; height: calc(100% - 54px);}
.box7::after { content: ''; position: absolute; width: 20px; height: 20px; background: url(~@/assets/images/borderBox/box7/k_box_dot.png) no-repeat; right: 0; bottom: 0;}
</style>
        `,
        boxCode1: `<Box1 style="height: 400px;">
  <template slot="center">
    边框内容
  </template>
</Box1>`,
        boxCode2: `<div style="padding: 42px 24px 30px; height: 320px;">
  <Box2>
    <template slot="center">
      边框内容
    </template>
  </Box2>
</div>`,
        boxCode3: `<Box3 style="height: 350px;">
  <template slot="center">
    边框内容
  </template>
</Box3>`,
        boxCode4: `<Box4></Box4>`,
        boxCode5: `<Box5 style="height: 300px;">
  <template slot="center">
    边框内容
  </template>
</Box5>`,
        boxCode6: `<Box6 style="height: 350px;">
  <template slot="center">
    边框内容
  </template>
</Box6>`,
        boxCode7: `<Box7 style="height: 350px;">
  <template slot="center">
    边框内容
  </template>
</Box7>`,
        fileList1: [
          {
            fileName: 'bg.png',
            feilePath: '/static/borderBox/box1/bg.png'
          },{
            fileName: 'border_title.png',
            feilePath: '/static/borderBox/box1/border_title.png'
          },{
            fileName: 'border-bottom.png',
            feilePath: '/static/borderBox/box1/border-bottom.png'
          },{
            fileName: 'border-bottom1.png',
            feilePath: '/static/borderBox/box1/border-bottom1.png'
          },{
            fileName: 'border-left.png',
            feilePath: '/static/borderBox/box1/border-left.png'
          },{
            fileName: 'border-right.png',
            feilePath: '/static/borderBox/box1/border-right.png'
          },{
            fileName: 'border-top.png',
            feilePath: '/static/borderBox/box1/border-top.png'
          },{
            fileName: 'border-top1.png',
            feilePath: '/static/borderBox/box1/border-top1.png'
          },{
            fileName: 'sy_xl_bg-light.png',
            feilePath: '/static/borderBox/box1/sy_xl_bg-light.png'
          }
        ],
        fileList2: [
          {
            fileName: 'bg_item.png',
            feilePath: '/static/borderBox/box2/bg_item.png'
          },{
            fileName: 'bg_title_time.png',
            feilePath: '/static/borderBox/box2/bg_title_time.png'
          },{
            fileName: 'st_k1.png',
            feilePath: '/static/borderBox/box2/st_k1.png'
          },{
            fileName: 'st_k1_1.png',
            feilePath: '/static/borderBox/box2/st_k1_1.png'
          },{
            fileName: 'st_k1_2.png',
            feilePath: '/static/borderBox/box2/st_k1_2.png'
          },{
            fileName: 'st_k2.png',
            feilePath: '/static/borderBox/box2/st_k2.png'
          },{
            fileName: 'st_k3.png',
            feilePath: '/static/borderBox/box2/st_k3.png'
          },{
            fileName: 'st_k4.png',
            feilePath: '/static/borderBox/box2/st_k4.png'
          },{
            fileName: 'sy_xl_bg-light.png',
            feilePath: '/static/borderBox/box2/sy_xl_bg-light.png'
          },
        ],
        fileList3: [
          {
            fileName: 'vis_card_bg_cl.png',
            feilePath: '/static/borderBox/box3/vis_card_bg_cl.png'
          },{
            fileName: 'vis_card_bg_cr.png',
            feilePath: '/static/borderBox/box3/vis_card_bg_cr.png'
          },{
            fileName: 'vis_card_bg_t2.png',
            feilePath: '/static/borderBox/box3/vis_card_bg_t2.png'
          },{
            fileName: 'vis_card_bg_tl.png',
            feilePath: '/static/borderBox/box3/vis_card_bg_tl.png'
          },{
            fileName: 'vis_card_bg_tr.png',
            feilePath: '/static/borderBox/box3/vis_card_bg_tr.png'
          },
        ],
        fileList4: [
          {
            fileName: 'tit_d.png',
            feilePath: '/static/borderBox/box4/tit_d.png'
          },{
            fileName: 'tit-small.png',
            feilePath: '/static/borderBox/box4/tit-small.png'
          },{
            fileName: 'tit-small-r.png',
            feilePath: '/static/borderBox/box4/tit-small-r.png'
          },
        ],
        fileList5: [
          {
            fileName: 'border-bottom.png',
            feilePath: '/static/borderBox/box5/border-bottom.png'
          },{
            fileName: 'border-l.png',
            feilePath: '/static/borderBox/box5/border-l.png'
          },{
            fileName: 'border-right.png',
            feilePath: '/static/borderBox/box5/border-right.png'
          },{
            fileName: 'border-top.png',
            feilePath: '/static/borderBox/box5/border-top.png'
          },{
            fileName: 'guang_a1.png',
            feilePath: '/static/borderBox/box5/guang_a1.png'
          },{
            fileName: 'guang_a2.png',
            feilePath: '/static/borderBox/box5/guang_a2.png'
          },{
            fileName: 'title_bg.png',
            feilePath: '/static/borderBox/box5/title_bg.png'
          },
        ],
        fileList6: [
          {
            fileName: 'bg_btm.png',
            feilePath: '/static/borderBox/box6/bg_btm.png'
          },{
            fileName: 'bg_tit5.png',
            feilePath: '/static/borderBox/box6/bg_tit5.png'
          },{
            fileName: 'bor_bottom_right.png',
            feilePath: '/static/borderBox/box6/bor_bottom_right.png'
          },{
            fileName: 'bor_top_left.png',
            feilePath: '/static/borderBox/box6/bor_top_left.png'
          },
        ],
        fileList7: [
          {
            fileName: 'k_box_dot.png',
            feilePath: '/static/borderBox/box7/k_box_dot.png'
          },{
            fileName: 'k_top_bgl.png',
            feilePath: '/static/borderBox/box7/k_top_bgl.png'
          },{
            fileName: 'k_top_bgr.png',
            feilePath: '/static/borderBox/box7/k_top_bgr.png'
          },
        ],
      }
    }
}
</script>

<style scoped>

</style>